<template>
  <div class="container">
    <van-cell-group>
      <multi-picker
        label="国家/地区"
        :show-level="1"
        split-char="-"
        :data="multiArray"
        default-active="安提瓜和巴布达"
        @change="onChecked"
        required
        :border="false"
      >
      </multi-picker>
      <van-field
        :value="formData.country"
        label="性别"
        placeholder="请选择性别"
        required
        :border="false"
      />
    </van-cell-group>
    <van-button
      type="primary"
      size="large"
      @click="onSubmit"
    >获取值</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import dist from '@/utils/countries'
import MultiPicker from '@/components/form/multiPicker'
export default {
  components: {
    MultiPicker
  },

  data () {
    return {
      current: '',
      formData: {
        country: ''
      },
      multiArray: dist
    }
  },
  onLoad (option) {
    // let continent = Object.keys(dist)
    // this.multiArray.push(continent)
    // this.multiArray.push(dist[continent[0]])
  },
  created () {
    console.log('test')
  },

  methods: {
    onSubmit () {
      console.log(this.formData.country)
    },
    onChecked (data) {
      console.log('test', data)
      let country = data.pop()
      this.formData.country = country.data
      Vue.set(this.formData, 'country', country.data)
      console.log('test', this.formData)
    }
  }
}
</script>

